// 定义全局的向左偏移量
let left = 0;
// 定义偏移后距离下次偏移的时间（毫秒）
let time = 20;
// 图片宽度，不能为质数（只能被1和自己整除）
const imgWidth = 980;
// 图片数量
let imgCount;

/*
 网页文档加载完毕之后做的动作，也就是初始化
 */
$(document).ready(function(){
    initShowOrHide();
    imgCount = $('.banner>ul.imgList img').length - 1;
    moveLeft();
    initTabs();
});

/**
 * 初始化切换显示/隐藏的事件
 */
function initShowOrHide(){
    $('.top_bg>.top>ul.right>li.list')
        .mouseover(function(){
            $('.top_bg>.top>ul.right>li.list>div').show();
        })
        .mouseout(function(){
            $('.top_bg>.top>ul.right>li.list>div').hide();
        });
}

/**
 * 延迟递归向左偏移
 */
function moveLeft() {
    // 设置一个最小的偏移值，如果一旦达到这个值，就让left重新变成0
    // 0、-980、-2*980、-3*980、-4*980
    if (left <= -imgCount * imgWidth) {
        left = 0;
    }
    if (left % imgWidth === 0) {
        time = 2000;
    } else {
        time = 20;
    }
    // 向下取整：0.5->0，1.2->1
    // 张数：0-3
    let index = Math.floor(-left / imgWidth);
    changeIco(index);
    $('.banner>ul.imgList').css('margin-left', left + 'px');
    /*
     表示间隔time毫秒之后，向左偏移left
     */
    left -= 10; // 越大越快，必须要能被980整除
    // 如果每次偏移50，0 -50 -100 -150 -200.... 无法偏移到 -980 -1960
    setTimeout(moveLeft, time); // 越大越慢
}

function changeImg(count) {
    let left_temp = -count * imgWidth;
    $('.banner>ul.imgList').css('margin-left', left_temp + 'px');
    changeIco(count);
    left = left_temp;
}

function changeIco(count) {
    $('.banner>ul.icoList p').css('background-color', 'rgba(0, 0, 0, 0.5)')
        .eq(count).css('background-color', 'rgb(255, 0, 0)');
}

function prevTo() {
    // 计算当前是第几张，0-3
    let index = Math.floor(- left / imgWidth);
    let prev = index - 1;
    // 如果index是0（第一张图片），前一张应该是最后一张图片（索引是imgCount - 1）
    if (index === 0) {
        prev = imgCount - 1;
    }
    changeImg(prev);
}

function nextTo() {
    // 计算当前是第几张，0-3
    let index = Math.floor(- left / imgWidth);
    let next = index + 1;
    // 如果index是imgCount - 1（最后一张图片），下一张应该是第1张图片（索引是0）
    if (index === imgCount - 1) {
        next = 0;
    }
    changeImg(next);
}


function initTabs() {
    // 所有表格隐藏，第一个表格显示
    $('.tabs>.tabs_content>table').hide().eq(0).show();

    // 给7个选项卡添加点击事件
    // 第1个选项卡，点了之后 需要把第一个a标签class设置成selected
    let tabs = $('.tabs>.tabs_head>ul>li>a');
    for (let i = 0; i < tabs.length; i ++) {
        // 添加事件
        tabs.eq(i).click(function() {
            // 先恢复
            tabs.removeClass('selected');
            // 添加class
            $(this).addClass('selected');
            // 切换表格的显示/隐藏
            $('.tabs>.tabs_content>table').hide().eq(i).show();
        });
    }
}